<!DOCTYPE html>
<html lang="zh">

<head>
	<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1" />
	<meta http-equiv=content-type content="text/html;charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0" />
	<title>详情</title>
	<script>
		//禁止双手缩放
		document.addEventListener('gesturestart', function (event) {
			event.preventDefault();
		});
	</script>

	<link rel="stylesheet" href="vant/index.css" />
	<script src="vant/vue.min.js"></script>
	<script src="vant/vant.min.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			outline: none;
		}

		body,
		html {
			font-family: -apple-system-font, Roboto, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
			font-size: 10px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="content">
			<img src="./v1/1.jpg" />
			<img src="./v1/2.jpg" />
			<img src="./v1/3.jpg" />
			<img src="./v1/4.jpg" />
			<img src="./v1/5.jpg" />
			<img src="./v1/6.jpg" />
			<img src="./v1/7.jpg" />
			<img src="./v1/8.jpg" />
		</div>
		<van-goods-action>
			<van-button block round type="primary" @click="wx.miniProgram.navigateTo({url: `/pages/order/checkout?id=${id}`})">立即订购</van-button>
		</van-goods-action>
	</div>
</body>

<script>
	new Vue({
		el: '#app',
		data() {
			return {

			}
		},

		computed: {
			id() {
				return this.getQueryString('id');
			}
		},

		watch: {

		},

		methods: {
			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				var context = "";
				if (r != null) context = r[2];
				return context == null || context == "" || context == "undefined" ? "" : context;
			},

			resizeRem() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
			}
		},

		async mounted() {
			this.resizeRem();

			window.onresize = () => {
				this.resizeRem();
			};
		}
	});
</script>

<style scoped>
	body {
		padding-bottom: 60px;
	}

	.van-goods-action {
		padding: 8px 16px;
	}

	.van-button--primary {
		background-color: #000;
		border-color: #000;
	}

	.content {
		padding: 1.6rem;
		padding: 0;
		font-size: 1.4rem;
	}
	.content img {
		display: block;
		width: 100%;
	}
</style>

</html>